<template>
  <div class="student-dashboard">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card>
          <div class="stat-title">我的申请统计</div>
          <div>已提交申请：<b>{{ stats.submitted }}</b></div>
          <div>已通过：<b style="color: #67c23a">{{ stats.approved }}</b></div>
          <div>已拒绝：<b style="color: #f56c6c">{{ stats.rejected }}</b></div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card>
          <div class="stat-title">最新公告</div>
          <ul>
            <li v-for="notice in notices" :key="notice.id">{{ notice.content }}</li>
          </ul>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const stats = ref({ submitted: 0, approved: 0, rejected: 0 })
const notices = ref([
  { id: 1, content: '2024年奖学金申请已开放，欢迎同学们踊跃报名！' }
])

// 获取申请统计数据
const fetchApplicationStats = async () => {
  try {
    const studentId = localStorage.getItem('studentId')
    console.log('从localStorage获取的studentId:', studentId)
    
    if (!studentId) {
      ElMessage.error('请先登录')
      return
    }

    console.log('开始请求接口，studentId:', studentId)
    // 复用my-applications页面的接口
    const res = await axios.get(`/scholarship-applications/search/student?studentId=${studentId}`)
    console.log('接口返回的原始数据:', res.data)
    
    const applications = res.data || []
    console.log('处理后的applications:', applications)
    
    // 统计各种状态的数量
    const submitted = applications.length // 总申请数
    const approved = applications.filter(app => app.status === '已通过').length
    const rejected = applications.filter(app => app.status === '已拒绝').length
    
    console.log('统计结果:', { submitted, approved, rejected })
    stats.value = { submitted, approved, rejected }
    console.log('最终stats.value:', stats.value)
  } catch (error) {
    console.error('获取申请统计失败:', error)
    ElMessage.error('获取申请统计失败')
  }
}

onMounted(async () => {
  await fetchApplicationStats()
})
</script>

<style scoped>
.student-dashboard {
  max-width: 1200px;
  margin: 0 auto;
}

.stat-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #303133;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

li:last-child {
  border-bottom: none;
}
</style>